{% extends 'base.html' %}
{% block title %}
Index
{% endblock %}

{% block content %}
<h1>欢迎您！{{ current_user.username }}</h1>
    <p>
        {% if current_user.is_authenticated %}
            <a href="{{ url_for('auth.logout') }}">注销</a>
            <a href="{{ url_for('auth.update_password') }}">修改密码</a>
            <a href="{{ url_for('auth.update_email') }}">修改邮箱</a>
        {% else %}
            <a href="{{ url_for('auth.login') }}">登录</a>
        {% endif %}
    </p>
    <hr>
    <h3>我的电话簿</h3>
    <hr>
    <button class="btn btn-default"><a href="{{ url_for("main.add_del") }}">新增联系人</a></button>
    <button class="btn btn-default"><a href="{{ url_for("main.tel_type") }}">新增类别</a></button>
    <br>
    <br>
    <input type="text" class="form-group" id="SelText" placeholder="（模糊查询）姓名">
    <button class="btn btn-success" id="SelBtn">查询</button>
    <br>
    类别分类：
    <select name="" id="sel_op">
        <option value="0" selected="selected">全部</option>
        {% for type in type_list %}
            <option value="{{ type.id }}">{{ type.name }}</option>
        {% endfor %}
    </select>

    <table class="table table-hover">
        <tr id="table_body">
            <td>姓名</td>
            <td>电话</td>
            <td>类型</td>
            <td>操作</td>
        </tr>
        {% for tel_book in tel_book_list %}
            <tr>
                <td>{{ tel_book.name }}</td>
                <td>{{ tel_book.tel }}</td>
                <td>{{ tel_book.typetels.name }}</td>
                <td>
                    <button class="btn btn-danger"><a href="{{ url_for("main.del_tel", id=tel_book.id) }}">删除</a></button>
                    <button class="btn btn-success"><a href="{{ url_for("main.update_tel", id=tel_book.id) }}">修改</a></button>
                </td>
            </tr>
        {% endfor %}
        
    </table>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        $(function () {
            // 异步查询
            function ajax_func(url, parameter){
                $.get(url, parameter, function (data) {
                    $("#table_body").nextAll().remove();
                    var html = "";
                    for (var i=0; i<data.length; i++){
                        html+="<tr>";
                        html+="<td>"+data[i].name+"</td>";
                        html+="<td>"+data[i].tel+"</td>";
                        html+="<td>"+data[i].type_name+"</td>";
                        html+="<td><button class='btn btn-danger'><a href='/del_tel/?id="+data[i].id+"'>删除</a></button><button class='btn btn-success'><a href='/update_tel/?id="+data[i].id+"'>修改</a></button></td>";
                        html+="</tr>";
                    }
                    $("#table_body").parent().append(html);
                });
            }

            // 模糊查询
            $("#SelBtn").click(function () {
                var sel_text = $("#SelText").val();
                ajax_func('{{ url_for("main.sel_text") }}', {'text': sel_text});
                $("#SelText").val("");
            });

            // 类别查询
            $("#sel_op").change(function () {
                var type_id = $(this).val();
                ajax_func('{{ url_for("main.sel_type") }}', {'type_id':type_id});
            })
        })
    </script>
{% endblock %}